<script setup>
	import {
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'

	import {
		jumpTo,
		navigateTo,
		isEmptyArray
	} from '@/utils/common.js'

	import http from '@/api/chatsApi'

	import {
		reactive,
		getCurrentInstance
	} from 'vue'

	import {
		useAudio
	} from "@/utils/audioPlay"
	const userAudio = useAudio()

	import {
		useVideo
	} from '@/utils/videoPlay'
	const userVideo = useVideo()

	const emit = defineEmits(['previewImage']);

	const instance = getCurrentInstance()

	const props = defineProps({
		id: {
			type: Number,
			default: 0,
		},
		isMy: {
			type: Boolean,
			default: false,
		},
		src: {
			type: String,
			default: '',
		},
		video: {
			type: String,
			default: '',
		},
		coverUrl: {
			type: String,
			default: '',
		},
		text: {
			type: String,
			default: '',
		},
		audio: {
			type: [String, Number],
			default: "0",
		},
		isRead: {
			type: Number,
			default: 1,
		},
		duration: {
			type: Number,
			default: 0,
		},
		gift: {
			type: String,
			default: "",
		},
		private: {
			type: Number,
			default: 0,
		},
		realname: {
			type: String,
			default: "",
		}
	})

	const data = reactive({
		// isPlay: false,
		isVideoPlay: false,
		isRead: props.isRead,
		animationData: {},
		videoGuid: generateRandomString(10)
	})

	// const innerAudioContext = uni.createInnerAudioContext();
	// const playVoice = () => {
	// 	console.log('播放录音');
	// 	innerAudioContext.stop()
	// 	innerAudioContext.src = props.src;
	// 	innerAudioContext.play();
	// 	innerAudioContext.onPlay(() => {
	// 		data.isPlay = true;
	// 		console.log('开始播放')
	// 	})
	// 	innerAudioContext.onEnded(() => {
	// 		// 播放完毕，清除音频链接
	// 		console.log('播放完毕');
	// 		data.isPlay = false;
	// 	})
	// 	innerAudioContext.onError((res) => {
	// 		console.log('audio play error', res)
	// 		data.isPlay = false;
	// 	})
	// }

	const playVoice = async () => {

		//暂停视频
		userVideo.playVideo("");

		let id = props.id

		userAudio.playVoice({
			id: id,
			url: props.src
		});

		if (data.isRead == 0) {
			const res = await http.readVedio(id);
			data.isRead = 1
		}

		// data.isPlay = true;
		// userAudio.playVoice(props.src, function(audio) {
		// 	// audio.onPlay(() => {
		// 	// 	console.log('开始播放')
		// 	// 	data.isPlay = true;
		// 	// })
		// 	// audio.onEnded(() => {
		// 	// 	// 播放完毕，清除音频链接
		// 	// 	console.log('播放完毕');
		// 	// 	data.isPlay = false;
		// 	// 	// innerAudioContext.destroy();
		// 	// })

		// 	// audio.onPause(() => {
		// 	// 	console.log('播放暂停');
		// 	// 	data.isPlay = false;
		// 	// })

		// 	// audio.onError((res) => {
		// 	// 	console.log('audio play error', res)
		// 	// 	data.isPlay = false;
		// 	// 	// innerAudioContext.destroy();
		// 	// })
		// })
	}


	onHide(() => {
		console.log('onHide 生命周期触发')
		// if (this.innerAudioContext) {
		// 	innerAudioContext.stop()
		// }
	})

	const toGift = (id) => {
		navigateTo("/pages/today/viewGift?id=" + id + "&private=" + props.private)
	}

	function previewImage(e) {
		// e.stopPropagation();

		emit("previewImage", props.src)

		// uni.previewImage({
		// 	current: 0,
		// 	urls: [props.src],
		// 	showmenu: false,
		// 	success: function(res){


		// 		 console.log(res)
		// 	}
		// })

	}

	function generateRandomString(length) {
		const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
		let result = '';
		for (let i = 0; i < length; i++) {
			const randomIndex = Math.floor(Math.random() * characters.length);
			result += characters[randomIndex];
		}
		return result;
	}

	function loadedmetadata(e) {
		// console.log(e);
		//获取所有视频的id,也就是在video里定义的id  
		userVideo.trailer.push({
			id: e.target.id,
			item: instance
		})

		// const {
		// 	width,
		// 	height
		// } = e.detail;

		// let videoContext = uni.createVideoContext(guid, instance); // this这个是实例对象 必传


		// videoContext.requestFullScreen({
		// 	direction: width > height ? 0 : 90
		// });
		// videoContext.play();

		// console.log(111);
	}

	// function videoPlay(){
	// 	// #ifndef MP-ALIPAY
	// 	this.videoContext = uni.createVideoContext('myVideo')
	// 	// #endif
	// }

	function screenChange(e) {
		let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
		// console.log(e, "全屏");
		
		// console.log(3333);
		
		if (!fullScreen) {
			//退出全屏
			data.isVideoPlay = false; // 隐藏播放盒子

			// exitFullScreenAnimation();

		} else {

		}
	}

	// 进入全屏时的动画
	function enterFullScreenAnimation() {
		const animation = uni.createAnimation({
			duration: 500,
			timingFunction: 'ease'
		});
		animation.scale(2).step();
		data.animationData = animation.export();
	}

	// 退出全屏时的动画
	function exitFullScreenAnimation() {
		const animation = uni.createAnimation({
			duration: 500,
			timingFunction: 'ease'
		});
		animation.scale(1).step();
		data.animationData = animation.export();
	}

	const videoPlay = (guid) => {
		// data.isVideoPlay = true;
		// userVideo.playVideo(guid);

		//暂停音频
		userAudio.disconnect()


		let videoContext = uni.createVideoContext(guid, instance); // this这个是实例对象 必传


		videoContext.requestFullScreen({
			direction: 0
		});
		
		// console.log(222)
		
		videoContext.play();

		data.isVideoPlay = true; // 显示播放盒子
		// enterFullScreenAnimation();


	}

	const onPause = () => {
		// data.isVideoPlay = false;
	}
</script>

<template>
	<!-- 	<view v-if="data.isVideoPlay">
@loadedmetadata="loadedmetadata"

		<video controls :id="data.videoGuid" :src="props.video" @fullscreenchange="screenChange"></video>
	</view> -->

	<view class="msg" :class="{ isMy: props.isMy }">
		<view v-if="!!props.video" class="video_content">
			<image class="video" v-if="data.isVideoPlay == false" :src="props.coverUrl" mode="aspectFill"
				@click="videoPlay(data.videoGuid)" />
			<video :id="data.videoGuid" class="video" @pause="onPause" v-else-if="data.isVideoPlay == true"
				object-fit="contain" :src="props.video" :custom-cache="false" @fullscreenchange="screenChange"
				@loadedmetadata="loadedmetadata" autoplay />
			<image v-if="data.isVideoPlay == false" src="/static/common/bofang.svg" @click="videoPlay(data.videoGuid)"
				style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 99;margin: auto; width: 100rpx; height: 100rpx;">
			</image>
		</view>

		<text class="text" v-else-if="!!props.text">{{ props.text }}</text>
		<view class="audio" v-else-if="+props.audio>0" @click="playVoice">
			<image class="icon" :class="{ isPlay: userAudio.playingId == +props.id && userAudio.isPlay }"
				src="/static/icon/audio.png" mode="aspectFit" />
			<text>{{props.duration}}s</text>
			<view v-if="data.isRead == 0" class="dot"></view>
		</view>
		<view v-else-if="!!props.gift">
			<image class="gift" @click="toGift(props.gift)" src="/static/icon/gift.png" mode="aspectFit" />
			<view v-if="props.private>0" style="margin-left: 63rpx; text-align: center;font-size: 17rpx;">
				{{props.realname}} 专属定制方案
			</view>
		</view>
		<image class="pic" v-else :src="props.src" lazy-load mode="widthFix" @click="previewImage" />
		<!-- <u-image class="pic" v-else :src="props.src" :lazy-load="true" model="widthFix" @click="previewImage"></u-image> -->
		<!-- <text>
            第3次语音交互&nbsp;&nbsp;第0次视频交互&nbsp;&nbsp;第0次文字交互&nbsp;&nbsp;第0次资料交互&nbsp;&nbsp;第0次图片交互
        </text> -->
	</view>
</template>

<style lang="scss" scoped>
	@keyframes play {
		0% {
			clip-path: circle(0% at 100% 50%);
		}

		40% {
			clip-path: circle(40% at 100% 50%);
		}

		60% {
			clip-path: circle(70% at 100% 50%);
		}

		90% {
			clip-path: circle(100% at 100% 50%);
		}
	}

	.video_content {
		position: relative;
		width: 453rpx;
		height: 274rpx;
	}

	.msg {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		&.isMy {
			align-items: flex-end;

			.audio {
				flex-direction: row-reverse;
				border-color: #a1a1a1;

				.icon {
					margin-left: 30rpx;
					margin-right: 20rpx;
					transform: rotate(0);
				}
			}

			.text {
				padding: 25rpx 25rpx 23rpx 32rpx;
				border-color: #a1a1a1;
			}
		}

		>.pic {
			// width: 340rpx;
			// height: 256rpx;
			max-width: 435rpx;
			margin-top: 10rpx;
			border-radius: 20rpx;
			border: 1px solid #e6e4e2;
		}

		.video {
			width: 453rpx;
			height: 274rpx;
			border-radius: 23rpx;
		}

		>.audio {
			position: relative;
			display: flex;
			align-items: center;
			margin-top: 15rpx;
			width: 330rpx;
			height: 80rpx;
			box-sizing: border-box;
			border: 0.5rpx solid rgb(207, 178, 76);
			border-radius: 11rpx;
			background: rgb(242, 242, 242);

			.icon {
				margin-left: 20rpx;
				transform: rotate(180deg);
				width: 24rpx;
				height: 31rpx;
				clip-path: circle(100% at 100% 50%);

				&.isPlay {
					animation: play 1s infinite;
				}
			}

			>text {
				margin-left: 30rpx;
				color: rgb(0, 0, 0);
				font-size: 15rpx;
				font-weight: 500;
				text-align: center;
			}

			.dot {
				position: absolute;
				right: -40rpx;
				background-color: #c18813;
				padding: 10rpx;
				border-radius: 50%;
			}
		}

		>.text {
			padding: 25rpx 32rpx 23rpx 25rpx;
			width: 528rpx;
			font-family: -apple-system, "PingFang SC", "Microsoft YaHei", SimSun, sans-serif;
			height: fit-content;
			box-sizing: border-box;
			border: 1rpx solid rgb(207, 178, 76);
			border-radius: 40rpx;
			background: rgb(242, 242, 242);
			color: rgb(94, 94, 94);
			font-size: 30rpx;
			font-weight: 400;
			line-height: 36rpx;
			text-align: left;
		}

		.gift {
			margin: 30rpx 0 0 63rpx;
			width: 255rpx;
			height: 146rpx;
		}

		>text {
			margin-top: 14rpx;
			color: rgb(110, 110, 110);
			font-size: 12rpx;
			font-weight: 600;
			line-height: 14rpx;
			text-align: left;
		}
	}
</style>